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摘要 : 【 目的 ] 设计 并 实现 基于 模型 -视图 -控制 器 (MVC) 前 端 AngularJS 框架 的 可 视 化 组 件 ng-info-chart。[ 应 用 


背景 ] 优秀 的 情报 分 析 平台 往往 需要 使 用 多 个 复杂 的 可 视 化 图 谱 组 合 展示 分 析 结果 ， 需 要 更 有 效 地 构建 复杂 的 、 
支持 大 量 交 互 操 作 的 网 页 端 情报 分 析 可 视 化 图 谱 。[ 方法 ] ng-info-chart 集成 多 种 可 视 化 图 谱 , 使 用 AngularJS 自 


定义 扩展 标签 统 


封装 , 通过 自 定义 HTML 标签 直接 在 页 面 中 调用 绘图 方法 。[ 结果 ] ng-info-chart 可 视 化 组 件 


随 着 研究 团队 情报 分 析 项 目 不 断 深入 与 完善 , 现 已 集成 5 个 第 三 方 可 视 化 类 库 中 11 种 可 视 化 图 谱 , 支持 IE9+、 
Firefox 等 主流 桌面 浏览 器 。【 结论 ] 利用 可 视 化 组 件 实现 数据 异步 获取 、 自 动 检测 数据 变化 与 实时 图 谱 绘 制 等 功 
能 , 极 大 简化 了 情报 分 析 系统 中 复杂 可 视 化 图 谱 的 开发 工作 。 


关键 词 : 可 视 化 ”前 端 MVC 自 定义 扩展 标签 
分 类 号 : G250 


1 3 引 


随 着 大 数据 时 代 的 到 来 , 支持 情报 分 析 的 可 视 化 
不 再 是 简单 的 图 表 统 计 所 能 满足 的 ， 而 是 采用 多 源 数 
据 并 使 用 复杂 可 视 化 图 谱 发 现 数据 中 隐藏 的 关联 关系 
和 发 展 趋势 。 为 满足 情报 分 析 需 求 ,情报 产品 开发 时 ， 
复杂 的 、 用 户 频 繁 交 互 的 可 视 化 图 谱 被 大 量 使 用 ， 如 
陈 超 美 博士 开发 的 CiteSpace 计 量 分 析 软 件 趾 和 专注 网 
络 计 量 分 析 的 Pajek 分 析 软 件 等 中, 均 为 用 户 提 供 揭示 
复杂 关联 关系 的 可 视 化 分 析 图 谱 ， 并 支持 用 户 交 互 、 
筛选 形成 最 终 深度 分 析 结 果 。 这 些 可 视 化 分 析 软 件 均 
是 客户 端 程序 ， 而 网 页 端的 复杂 情报 可 视 化 工具 并 不 
富 ， 以 简单 地 统计 分 析 图 表 为 主 。 究 其 原因 主要 是 
复杂 可 交互 可 视 化 分 析 对 服务 器 、 浏 览 器 压力 过 


了 中 


/ 


大 , 编码 复杂 ,开发 难度 大 。 随 着 信息 技术 发 展 , 特别 
是 新 的 浏览 器 引 敬 技术 的 高 速 发 展 , 浏览 器 端 脚本 
JavaScript 的 运算 速度 有 了 极 大 提高 ， 可 以 较 短 时 间 内 
绘制 复杂 的 可 视 化 图 谱 。 本 文 调 研 了 业界 最 新 的 网 页 
端 可 视 化 图 谱 开 发 模式 与 开发 框架 , 并 与 情报 研究 分 
析 需 求 结合 , 设计 并 实现 基于 自 定义 HTML 标签 调用 
的 可 视 化 组 件 ng-info-chart, 方便 开发 人 员 调 用 可 视 
化 图 谱 , 并 将 可 视 化 数据 与 用 户 交 互 操作 双向 绑 定 ， 简 
化 了 大 量 Ajax 异步 数据 获取 与 调用 多 种 可 视 化 类 库 的 
操作 ,实现 智能 监测 数据 变化 并 自动 更 新 图 谱 功 能 。 


2 ”情报 分 析 中 可 视 化 需求 与 相关 技术 


2.1 情报 分 析 中 的 可 视 化 需求 
信息 可 视 化 不 仅 用 视图 来 显示 多 维 的 非 空 间 数 


通讯 作者 : 陈 挺 ，ORCID: 0000-0003-4785-$367，E-mail: chent@mail.las.ac.cn。 
*# 本 文系 国家 自然 科学 基金 项 目 “ 科 学 结构 特征 及 其 演化 动力 学 分 析 方法 应 用 研究 ”( 项 目 编号 : 71173211) 的 研究 成 果 之 一 。 
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据 ， 使 得 用 户 加 深 对 数据 含义 的 理解 ， 而 且 可 以 用 形 
象 直观 的 图 像 指导 服务 过 程 ， 从 而 改善 服务 的 效率 和 
效果 趾 。 当 今 情报 分 析 工 作 中 所 需 的 可 视 化 图 谱 越 来 
武 复 杂 , 情报 分 析 人 员 对 分 析 图 谱 的 可 操作 性 的 要 求 
也 越 来 越 高 ,例如 Global Open Access Development 平 
台 "中 , 开放 获取 数据 地 图 可 视 化 图 谱 除 了 展示 相关 
数据 统计 外 ,还 需 在 地 图 中 直接 得 选 、 计 算 、 检 索 、 

显示 /隐藏 相关 数据 。 如 在 重大 科技 动态 图 谱 项 目 * 中 ， 
多 维 对 比 图 中 需 通 过 时 间 轴 拖 忠 与 重要 度 得 分 动态 往 
选 数据 , 并 根据 不 同 的 统计 需求 对 可 视 化 图 的 统计 模 
式 和 横 纵 坐标 轴 进 行 转换 ， 再 如 科研 竞争 力 全 向 评估 


2.2 ”常用 网 页 端 可 视 化 类 库 

开源 程序 仓库 GitHub 提供 的 编程 语言 趋势 分 析 
中 可 以 看 出 , 近年 来 JavaScript 在 网 页 端的 使 用 量 快 
速 增长 外 ,同时 基于 JavaScript 的 前 端 可 视 化 开发 类 库 
也 得 到 了 快速 发 展 ,逐渐 成 为 网 页 可 视 化 的 首选 外 
有 大 量 优秀 的 可 视 化 工具 和 图 谱 可 供 选 择 。 而 其 他 诸 
如 Flash、Silverlight、Java Applet 等 网 页 端 可 视 化 技术 
渐渐 远离 开发 人 员 的 视线 。 

网 页 端 可 视 化 图 谱 的 开发 中 ,针对 不 同 可 视 化 分 
析 和 需求 有 多 种 JavaScript 可 视 化 工具 和 类 包 可 供 选 择 ， 
但 面 对 复 杂 的 情报 分 析 平 台 , 单一 的 可 视 化 分 析 工 具 


往往 无 法 满足 全 部 的 可 视 化 分 析 需 求 ， 常 常 需要 调用 
多 个 可 视 化 分 析 工 具 和 类 库 。 如 果 可 视 化 需求 极为 特 
殊 , 无 法 直接 调用 已 有 封装 的 图 谱 , 更 需要 底层 定制 
图 谱 。 表 1 为 情报 分 析 平 台 开 发 时 常用 可 视 化 分 析 工 
具 类 库 对 比 ， 其 中 列举 的 6 个 工具 和 类 库 , 可 以 满足 
从 简单 统计 图 表 到 力 矢 量 图 、 时 序 分 析 图 和 地 理 信息 
图 等 深度 可 视 化 分 析 需 求 , 表 1 第 三 列 为 程序 员 问 答 
网 站 关于 可 视 化 工具 提问 数 统计 ， 从 提问 量 中 可 以 看 
出 , Highchatjs .D3.js 的 社团 活跃 度 远 远 超过 Echarts.js 
和 Datav.js， 因 此 本 文 可 视 化 工具 集成 也 优先 选用 
Highchat.js 和 D3.js。 


系统 中 , 采用 了 力 矢量 布局 图 展示 论文 、 项 目的 布局 ， 
用 户 可 以 直接 在 页 面 中 调整 聚 类 参数 、 力 矢量 布局 系 
数 、 筛 选 分 析 对 象 等 , 系统 根据 用 户 交 互 操作 形成 最 
终 可 视 化 分 析 结 果 。 虽 然 现 今 基 于 JavaScript 的 可 视 
化 组 件 有 很 多 选择 , 但 集成 多 种 类 库 绘制 图 谱 开 发 存 
在 难度 大 、 维 护 成 本 高 等 问题 , 开发 一 个 支持 用 户 大 
rr 量 交 互 , 功能 完备 的 可 视 化 分 析 平 台 需 要 投入 大 量 人 
让 力 物 力 , 为 此 急需 一 种 松 看 合 、 模 块 化 的 可 视 化 图 谱 
We 的 开发 模式 。 本 研究 对 业界 常用 可 视 化 类 库 和 前 端 开 
4 放 框 架 进 行 详细 的 调研 , 设计 并 初步 实现 可 视 化 组 件 
库 ng-info-chart。 


表 1 常用 可 视 化 图 谱 比 较 ( 统 计 于 2015 年 11 月 ) 


Stack OverFlow 


CS 化 一 各 可 视 化 堆 求 
一 可 视 化 js 类 库 面向 可 视 化 需求 i 
. ， ”绘制 折线 图 、 饼 图 、 柱 状 图 、 树 型 图 、 散 点 气泡 图 、 雷 达 图 等 常规 分 析 图 表 。 浏 览 器 兼容 性 好 , API 
[® | Highchats.js 功能 完善 ,社区 活跃 25 874 
charts ;。 百度 公司 的 开源 可 视 化 工具 ， 相 比 Highcharts, 图表 类 型 更 丰富 , 不 但 有 折线 图 、 饼 图 、 柱 状 图 等 党 
见 可 视 化 图 表 , 还 有 热力 图 、 河 流 图 、 字 符 云 、 力 矢量 图 等 新 型 可 视 化 图 谱 。 
基于 SVG 矢量 图 技术 的 绘图 框架 ， 与 其 他 可 视 化 类 库 不 同 , D3.js 不 是 基于 已 有 的 可 视 化 图 谱 的 封装 ， 3》 5og 
而 是 一 种 面向 数据 的 可 视 化 高 级 语言 。 主 要 用 于 实现 复杂 的 可 视 化 图 谱 ， 如 力 矢 量 图 、 河 流 图 等 。 
于 Datavjs 是 淘宝 下 可 视 化 实验 室 开源 的 可 视 化 库 , 利用 D3.js 将 常用 的 可 视 化 图 谱 进 行 封 装 ， 方 便 开 
atav.jS 发 者 调用 。 0 
Goosle mn， 在 开发 基于 地 理 信息 位 置 的 分 析 图 谱 时 ,如 果 面 向 全 世界 ,免费 的 类 库 没 有 太 多 的 选择 , 只 有 ”0 ?70 
8 P Google map 和 Open map, Google map 的 社区 非常 活跃 , 通常 是 开发 者 的 首选 。 


2.3 方 可 视 化 图 谱 的 开发 模式 代码 过 于 繁杂 ,无 法 满足 


复杂 的 支持 交互 的 情报 分 析 平 台 开 发 需求 ， 本 研究 


前 端 开发 框架 AngularJS 
最 常用 的 jQuery Ajax 异步 数据 更 新 再 调用 第 三 
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需要 一 种 高 效 前 端 可 视 化 图 谱 开 发 模式 ， 调 研 业 界 
主流 前 端 MVC 框架 后 发 现 , 虽然 近年 来 前 端 MVC 
框架 层出不穷 , 但 是 经 过 对 比 ，Google 公司 发 布 的 
AngularJSI 是 其 中 最 有 影响 力 的 前 端 MVC 框架 。 选 
择 一 个 开源 技术 框架 , 除了 技术 本 身 的 优 劣 外 很 重 


Metric Angular]s Backbone.js Ember.js 


Stars on Github 40.2k 18.8k 14.1k 


Third-Party Modules 


1488 ngmodules 256 backplugs 1155 emberaddons 


104k 18.2k 15.7k 
-93k -10.6k -9.1k 
96 265 501 
275k 15.6k 66k 
922 13 413 
Closed Issues 5,520 2,062 3,350 
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应 用 认 


要 的 一 个 评判 标准 是 开源 社区 的 活跃 度 ， 从 图 1 可 以 
看 出 业界 三 大 前 端 MVC 框架 中 AngularJS 无 论 从 开 
发 人 员 的 关注 度 还 是 技术 社区 活跃 度 都 远 远 超过 其 
他 框架 ,因此 本 文选 用 AngularJS 作为 前 端 可 视 化 组 
件 的 开发 框架 。 
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图 1 三 大 主流 前 端 MVC 框架 GitHub 活跃 度 和 Google 检索 关注 度 统计 口 


AngularJS 是 Google 公司 开发 并 维护 的 纯 客 户 端 
JavaScript 技术 的 前 端 框 架 , 用 于 扩展 、 增 强 HIML 功 
能 、 简 化 开发 过 程 以 及 测试 复杂 度 ， 专 为 构建 强大 的 
Web 应 用 而 设计 由。 框架 为 开发 人 员 提 供 了 大 量 先 进 
功能 : MVC 结构 、 数 据 双向 绑 定 、 路 由 、 模块 化 管理 、 
自 定 义 扩 展 标签 (Directive)、 依 赖 注 入 、 前 端 HTML 
模板 等 ,其 中 AngularJS 独 有 的 “ 自 定义 扩展 标签 ”“ 双 
向 数据 绑 定 ?功能 可 以 很 好 地 满足 复杂 可 交互 情报 分 
析 图 谱 的 技术 需求 , 大 大 简化 用 户 交互 而 产生 的 Ajax 
数据 操作 和 可 视 化 方法 的 调用 。 同时 框架 也 提供 “模块 
化 管理 ”以 及 “依赖 注入 ”等 高 级 语言 的 特性 弥补 原生 
JavaScript 脚本 语言 在 模块 化 调用 中 的 不 足 。 

(1) 自 定义 扩展 标签 

自 定义 扩展 标签 是 AngularJS 框架 提供 的 自 定义 
DOM 元 素 标记 ， 人 允许 开发 人 员 扩展 HTML 标签 并 将 
动态 数据 与 之 绑 定 巴 。 在 可 视 化 组 件 设 计 中 ， 可 通过 自 
定义 扩展 标签 将 不 同 的 可 视 化 类 库 封 装 成 不 同 的 
HTML 标签 , 并 直接 在 HTML 页 面 中 通过 自 定 义 标签 
调用 可 视 化 方法 。 

(2) 双向 数据 绑 定 

双向 数据 绑 定 (Two Way Data Binding) 或 许 是 
AngularJS 中 最 重要 且 无 法 通过 jQuery 简单 实现 的 功能 
之 一 , 借助 它 可 以 将 一 个 私有 作用 域 中 的 属性 同 DOM 
中 的 属性 值 进行 绑 定 中 。 一 个 典型 的 Web 应 用 程序 中 
大 部 分 的 前 端 代码 都 是 DOM 元 素 监听 , 获取、 更 新 数 
组 与 对 象 。 借 助 双向 数据 绑 定 功能 可 以 简化 前 端 数据 


本 下 现代 图 书 情报 技术 


的 操作 , 无 论 是 控制 器 (Controllen 中 已 保存 的 数据 ， 
还 是 从 接口 API 中 获取 更 新 数据 ， 或 用 户 操作 修改 了 
数据 ， 绑 定数 据 会 自动 在 整个 应 用 各 个 层 中 自动 同步 ， 
包括 自 定 义 标签 中 调用 的 数据 , 非常 适合 面向 大 量 交 
互 的 可 视 化 图 谱 的 开发 。 


3 ng-info-chart 可 视 化 组 件 设计 与 实现 


3.1 复杂 可 视 化 图 谱 开发 中 的 问题 

使 用 原生 JavaScript 或 jQuery 实现 交互 式 可 视 化 
图 谱 开 发 往往 包括 多 个 环节 : Ajax 数据 获取 , 调用 可 
视 化 类 库 与 div 元 素 绑 定 , 渲染 可 视 化 数据 ,交互 事件 
(如 用 户 点 击 、 拖 中 按钮 ) 与 Ajax 数据 获取 再 次 绑 定 ， 
更 新 可 视 化 数据 , 移 除 已 有 可 视 化 图 谱 , 重新 泻 染 这 
可 视 化 图 谱 。 复 杂 的 可 视 化 图 谱 , 常 在 同一 页 面 中 调 
用 多 组 可 视 化 数据 并 调用 多 个 可 视 化 类 库 , 演 染 多 个 
可 视 化 图 谱 ， 或 者 可 视 化 数据 与 多 个 用 户 操作 绑 定 ， 
容易 造成 前 端 JavaScript 程序 开发 难度 大 ,多 种 外 部 
依赖 库 调用 混乱 , 后 期 代码 难以 维护 等 问题 。 
3.2 可视化 组 件 设计 

考虑 到 以 上 问题 , ng-info-chart 可 视 化 组 件 设计 
时 , 利用 AngularJS 框架 中 独 有 的 “ 自 定义 扩展 标签 ” 
与 “双向 数据 绑 定 ”特性 , 在 可 视 化 组 件 中 设计 并 实现 
了 以 下 6 个 功能 以 简化 可 视 化 图 谱 开 发 : 

(1) 可 视 化 类 库 模 块 化 封装 : 可 视 化 组 件 采用 模 
块 化 封装 , 利用 AngularJS 框架 中 的 模块 管理 功能 "， 
将 第 三 方 可 视 化 方法 分 别 封 装 入 不 同 组 件 模块 


(AngularJS Module) 中 , 调用 组 件 绘 制图 谱 时 无 需 在 页 
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还 是 API 中 更 新 数据 , 模型 层 都 会 自动 更 新 最 新 数据 ， 


面 中 载 人 全 部 的 可 视 化 组 件 ， 只 需 调用 对 应 模块 即 可 ， 
提高 运行 速度 。 

(2) 外 部 资源 动态 引入 : 如 果 分 析 系 统 中 需要 使 
用 多 个 可 视 化 类 库 , 则 需要 开发 者 在 页 面 中 载 和 多 个 
类 库 对 应 文件 , 载 入 资源 的 版 本 以 及 载 入 的 顺序 均 非 
常 容易 造成 图 谱 泻 染 错误 ,可视化 组 件 将 库 及 相关 资 
源 载 和 人 工作 从 页 面 中 移 人 可 视 化 组 件 统一 载 人 与 管 
理 , 开发 人 员 无 需 在 页 面 中 管理 多 种 资源 的 载 和 只 
需 载 入 可视化 组 件 文件 infochart.js 即 可 。 

(3) 定义 图 谱 的 “ 自 定义 扩展 标签 ”: 不 再 使 用 监测 
div 元 素 id 的 方式 绑 定 可 视 化 图 谱 与 页 面 元 素 , 而 是 将 
不 同 的 可 视 化 类 库 封装 成 不 同 的 “ 自 定义 扩展 标签 ”， 
如 使 用 D3.js 开发 的 力 矢量 图 封装 成 “ng-info-force” 标 
签 并 定义 其 对 应 传人 的 可 视 化 数据 , 在 HIML 页 面 中 
通过 自 定义 标签 直接 调用 , 这样 简化 图 谱 与 页 面 元 素 


四 


和 数据 绑 定 工作 , 提高 了 程序 的 可 读 性 和 可 维护 性 。 
(4) “双向 数据 绑 定 ”可视化 数据 : 将 可 视 化 数据 存 
储 在 AngularJS 模型 (ModeD) 层 中 , 不 论 用 户 修改 数据 


页 面 调用 可 视 化 组 件 
View 
<ng-info-heatmap 
data="heatData” 


Cntroller 


Highchart 模 块 


ng-info-heatmap 
( 自 定义 扩展 标签 ) 调用 对 可 视 化 函数 


可 视 化 组 件 自动 继承 模型 中 存储 的 最 新 数据 ， 开 发 人 
员 无 需 将 更 新 数据 与 可 视 化 方法 反复 对 应 。 

(5) 常用 可 视 化 图 类 绘图 方法 封装 : 将 多 个 情报 
分 析 平 台 常 用 js 类 库 绘 图 方法 与 常用 工具 如 点 击 ， 其 
浮 在 标签 中 封装 ,方便 调用 。 

(6) 自动 监测 数据 变化 并 刷新 图 谱 : 在 可 视 化 组 
件 中 监控 数据 变化 , 一 旦 发 现 用 户 操 作 改 变 了 数据 或 
者 数据 接口 更 新 数据 , 组 件 将 自动 刷新 可 视 化 图 谱 。 

可 视 化 组 件 调 用 流程 图 如 图 2 所 示 , 可 视 化 图 谱 
绘图 方法 通过 自 定义 扩展 标签 统一 封装 ， 每 个 标签 中 
还 包括 调用 外 部 可 视 化 类 库 资 源 方法 、 监 测 数据 变化 
方法 。 自 定义 扩展 标签 根据 第 三 方 可 视 化 类 库 不 同 ， 
封装 在 不 同 的 Angular 模 块 中 , 按照 本 身 可 视 化 图 谱 和 名 
称 统一 命名 ,如 封装 Highchartjs 中 的 热力 图 方法 
(Heatmap) 的 自 定义 扩展 标签 命名 为 ng-chart- heatmap。 
调用 可 视 化 绘图 时 先 通过 依赖 注 和 人 Highchart 绘 图 模 
块 ， 再 在 HTML 页 面 中 引入 标签 <ng-chart-heatmap> 绘 
制 热力 图 谱 , 组 件 调 用 详 见 3.4 节 。 


ng-info-chart 可 视 化 组 


外 部 类 库 可 视 化 函数 
Highchart.js 


立 可 视 - 
ng-info-barline i en 


$scope.heatData 监控 数据 变 人 


ng-info-bubble 


一 一 


调用 Ajax 服务 


google chart.js 
可 视 化 函数 


( 获取 可 视 化 数据 


D3 模块 


数据 API 


service ， Google 模 块 


其 他 模块 


| 其 他 可 视 化 类 库 
可 视 化 函数 


图 2 ng-info-chart 可 视 化 组 件 调用 流程 


3.3 可视化 类 库 在 自 定义 扩展 标签 中 的 封装 
为 了 将 多 个 第 三 方 可 视 化 类 库 有 序 地 封装 人 
AngularJS 框架 的 自 定义 扩展 标签 内 , 组 件 开发 时 遵 


Dhttps://docs.angularjs.org/guide/module. 


从 AngularJS 框架 的 最 佳 实践 开发 模式 中 。 可 视 化 组 
件 结构 如 图 3 所 示 , 组 件 底层 为 多 个 第 三 方 可 视 化 类 
库 , 将 其 中 常 被 情报 分 析 平 台 使 用 的 可 视 化 图 类 方 
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应 用 认 


法 封装 在 AngularJS 框架 的 服务 "(Service Factory) 中 ， 
需要 时 可 通过 依赖 注入 的 方式 引入 自 定 义 扩展 标签 
中 调用 , 在 自 定 义 标签 中 统一 设计 自 定义 调用 标签 


名 称 与 定义 对 应 绘图 数据 , 并 通过 在 自 定 义 标 签 中 
调用 “$watch” 命 令 监 控 数据 更 新 并 自动 刷新 可 视 化 
图 谱 。 


we 


定义 不 同 图 谱 的 Directive 指 令 ， 形 成 自 定义 标签 


将 不 同类 库 的 图 类 封装 人 AngularJS Factory 


地 图 气泡 图 “ 力 矢 量 图 “Motion 图 饼 


折线 性 伏 。 折线 图 词 云 时 序 河流 图 


saa, 


EN EE] 


Google map、Google chart、Highchart.js、D3.js、jQCloud 


图 3 ng-info-chart 可 视 化 组 件 结构 


以 热力 图 为 例 ， 自 定义 标签 封装 JavaScript 代码 


如 下 : 


(1) 可 视 化 图 谱 方法 模块 化 封装 : 将 第 三 方 可 视 


化 图 谱 绘 图 方法 封装 和 人 AngularJS 框架 中 的 Factory 中 ， 


以 代 


t 自 定义 标签 中 调用 ， 一 个 模块 可 以 封装 多 个 


Factory，Factory 中 可 含有 多 个 绘图 方法 ， 同 一 个 类 库 
的 方法 可 以 封装 在 一 个 Factory 中 ,核心 Factory 代码 
如 下 所 示 : 


/ 


* 使 用 Factory 封装 Highchart 中 部 分 可 视 化 图 谱 */ 


var chart = angular.module("chart", []); 


/ 


*Heatmap 图 谱 */ 


chart.factory(highchart, function(){ 


return { 
heatmap: function(container, data){ 
放 此 处 Highchart 绘图 方法 */ 
}， 
/# 封 装 更 多 Highchart 绘图 方法 */ 
barline: function(container, data){ 


}， 


); 


Dhttps://docs.angularjs.org/guide/services. 
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(2) 封装 自 定义 扩展 标签 <info-chart-heatmap>: 
将 标签 封装 infoChart.highcharts 模块 中 , 并 引入 之 前 
封装 的 绘图 模块 Chart 中 的 Highchart Heatmap 的 绘 医 
方法 , 同样 一 个 模块 可 包含 多 个 标签 , 核心 代码 如 下 
所 示 : 
/# 定 义 新 模块 infoChart.highcharts,， 封装 自 定义 扩展 标签 */ 
var infoChartHighcharts = angular.module("infoChart.highcharts", 
[highcharts"]); 
/* 定 义 “ 自 定义 html 标签 ”-infoChartsHeatmap, 在 其 中 引入 对 应 
的 绘图 方法 : highchart*/ 
infoChartHighcharts.directive('infoChartsHeatmap,, 
function($window, highchart){ 
return{ 
restrict:EA', 
template:"<div class='myCharts'></div>", // 定义 标签 
中 html 容器 
scope:{ 
chartData:'=V/ 获 取 标 签 属性 中 chartData 中 的 数据 
}, 
link: function(scope, elem, attrs){ 
// 使 用 $watch 方法 监控 数据 变化 ,如 果 数 据 有 变 
化 自动 更 新 图 谱 
scope.$watch('chartData', function(nv){ 
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var container=elem.find('div'); 并 将 数据 储存 人 Model $scope.motion data 中 ， 如 
highchartheatmap(container nv); 图 4(@) 中 标签 2 的 位 置 : 此 时 开发 人 员 只 需 在 HTML 页 
} . 面 中 使 用 自 定义 标签 “<ng-info-motion data=motion Data> 

} </ng-info-motion>” 调 用 可 视 化 组 件 ， 如 图 4(a) 中 标签 3 

»); 的 位 置 ; 并 将 组 件 所 需 可 视 化 数据 通过 标签 属性 
3.4 ng-info-chart 可 视 化 组 件 调用 “data=motion_data” 将 Model 中 存储 数据 与 组 件 关联 ， 


相 比 直接 调用 第 三 方 可 视 化 类 库 , 通过 ng-info- ”组 件 会 自动 在 HTML 页 面 中 的 标签 位 置 绘制 多 维 动态 
chart 组 件 绘制 图 谱 在 代码 层面 更 易 实 现 。 图 4 以 调用 可 ”图 谱 如 图 4(b) 所 示 。 之 后 无 论 是 数据 接口 更 新 还 是 用 
视 化 组 件 绘制 多 维 动态 对 比 图 (Motion Chart) 为 例 说 明 ” 户 交 互 操作 修改 可 视 化 数据 ， 可视化 组 件 会 自动 监测 
可 视 化 组 件 调用 流程 , 通过 AngularJS 依 赖 注入 调用 可 ”数据 变化 并 重新 动态 生成 可 视 化 图 谱 , 相 比 于 传统 的 开 
视 化 组 件 中 Google 可 视 化 模块 ,如 图 4(a) 中 标签 1 的 位 。 ”发 模式 调用 第 三 方 可 视 化 类 库 , 使 用 ng-info-chart 开 发 
置 ; 通过 Ajax 服 务 从 后 端 数 据 接口 获取 可 视 化 数据 ， ”代码 更 简洁 易 读 , 开发 更 为 高 效 ， 尤 其 便于 后 期 维护 。 
| 人 国生 调用 motion chart 组 件 


<script src="//cdn.bootcss, com/jquery/1, 11.3/jquery,min,js"></script>| = 


ajaxCall.getChartData( 'motiondataapi, json').then(function(ajaxData) { 
$scope.motion_chart = ajaxData; 回 


<script Src=",./js/angular,.js"></script> residents 
<script src=' /js/ngInfochart, js '></script> 和 
</head> 
“ <body ng-app="myApp" ng-controller="myCtl"> [United States, 1995) 
二 <h3> 这 是 一 个 ng-info-chart 的 实例 ; 调用 motion chart 组 件 </h3> CO2 emissions (Kb) 
GG, 园 <into-charts-notion chart-data="motion_chart"></info-charts-motion> 
© </body> it 
a </html> 中 
ma <script> 上 | 中 
" | var myApp = angular.module('myApp', Linfochart.googte']); 国 去 
myApp.controller('myCtl', function($scope, $http, ajaxCall) { 2 


GDP (current US$) 7 Liny 


Vv 
Yr 


}) 
</scripty| 


(a) 使 用 ng-info-chart 组 件 绘制 多 维 对 比 图 示例 (b) 可 视 化 图 谱 效 果 展 示 
图 4 可 视 化 组 件 调用 流程 示例 


其 中 , 图 4(a) 的 标签 1 为 通过 依赖 注入 引入 绘图 所 ”” 技 动态 全 景 图 谱 项 目的 多 维 对 比 气泡 图 , 科研 竞争 力 
需 方法 模块; 标签 2 为 在 JavaScript 中 调用 Ajax 异步 服 。” 全 向 评估 项 目 中 的 力 和 撩 量 图 , 科学 结构 地 图 网 页 版 中 
务 , 获取 绘图 数据 并 储存 人 Model $scope.motion chart 的 河流 时 序 图 等 。 相 比 直接 在 原生 JavaScript 或 者 
中 ; 标签 3 为 在 HIML 页 面 中 , 通过 自 定 义 HIML 标 签 jQuery 中 调用 第 三 方 可 视 化 类 库 , 使 用 ng-info-chart 组 


<ng-info-motion> 调 用 可 视 化 组 件 并 载 人 Model 中 的 可 表 2 ng-info-chart 已 集成 第 三 方 可 视 化 类 库 列表 
视 化 数据 。 通 过 以 上 三 个 步 又, 可视化 组 件 会 调用 底 本 
层 封装 的 第 三 方 可 视 化 类 库 绘 多 维 对 比 图 。 化 类 库 2 i 
si 饼 图 ng-info-pie 
4 应 用 实例 折线 图 ng-info-line 
8 > 四 -二 TAI 2/ I . . 柱状 图 ng-info-bar 
ng-info-chart 可 视 化 组 件 起 始 于 以 往 情 报 分 析 平 Highchats.js pe et 
线 柱状 医 ng-info-linebar 
台 对 复杂 可 视 化 图 谱 的 实际 需求 ， 从 2014 年 初 至 今 已 和 
气泡 图 ng-info-bubble 
集成 5 个 第 三 方 可 视 化 类 库 中 的 11 种 可 视 化 图 谱 ( 见 热力 图 Pe 
表 2)。 有 统计 饼 图 、 柱 状 图 等 基础 分 析 图 表 ， 也 有 如 力 矢 量 图 ng-info-force 
气泡 图 与 Motion 图 的 多 维 对 比分 析 图 ， 还 有 基于 I 河流 时 序 图 ng-info-sankey 
Google map 的 地 理 信息 位 置 分 析 图 谱 和 解释 关系 的 力 Google map ”地 图 ng-info-map 
矢量 图 和 河流 时 序 图 。 并 在 多 个 情报 研究 项 目 中 实际 Google chart Motion-chart ng-info-motion 
应 用 ( 见 图 5), 如 开放 获取 平台 中 的 交互 地 图 ,重大 科 。。”jQClovaj。 。 局 云 reinto-cloud 
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(a) 开放 获取 平台 中 的 交互 地 图 


重大 科技 动态 全 景 图 谱 到 s+ax 
总 图 -重大 扑 测 下 态 28 条 动态 


(b) 重大 科技 动态 全 景 图 谱 项 目的 多 维 对 比 气泡 图 


ETTTTTTIETZZ7 


师 来 科技 
[5 


(d) 科学 结构 地 图 网 页 版 中 使 用 的 河流 时 序 图 


0 


United Stiates, 1990| 


Patent applications. residents 


2009 


M 
入 者 


(e) 战略 信息 集成 服务 平台 中 内 嵌 的 图 (多 维 动态 图 ) 


件 绘制 图 谱 大 大 减少 了 前 端 代码 ， 开 发 效率 更 高 ， 同 
时 代码 更 简洁 易 读 , 便于 后 期 维护 。 同 时 ng-info-chart 
可 视 化 组 件 还 在 不 断 完善 中 , 根据 不 同 的 可 视 化 需求 ， 
逐渐 补充 封装 更 多 可 视 化 组 件 。 现 有 可 视 化 组 件 均 支 
持 IE9+、Chrome 、Firefox 等 主流 桌面 浏览 器 。 


5 结 语 


ng-info-chart 可 视 化 组 件 是 一 个 非常 实用 的 可 视 
化 集成 工具 , 它 满足 了 在 网 页 端 松 耦合 、 模 块 化 绘制 
复杂 的 、 多 种 类 型 和 支持 频繁 交互 的 可 视 化 需求 , 大 
大 简化 了 新 型 情报 分 析 平台 的 中 复杂 的 可 视 化 图 谱 的 
开发 工作 。 过 去 的 两 年 中 支持 了 多 项 情报 分 析 平 台 、 
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沽 到 态 物理 【Condensed Matter Physics) 多 维 对 比分 析 
Unarmo srares 


ea vs ea 


(D 常用 的 饼 图 、 折 线 图 、 折 线 柱状 图 
图 5 ng-info-chart 可 视 化 组 件 在 情报 分 析 平 台中 实际 应 用 场景 


工具 的 开发 ng-info-chart 可 视 化 组 件 现 有 图 谱 种 类 有 
限 ,目前 还 不 能 支持 全 部 的 可 视 化 需求 , 但 是 随 着 情 
报 研究 工作 的 不 断 深 入 ， 本 研究 团队 将 不 断 扩展 组 件 
的 内 容 , 希望 在 未 来 可 以 服务 更 多 情报 研究 需求 。 
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ng-info-chart: The Visualization Component Based on Customized 
HTML Iags 


Chen Ting! Wang Xiaomeil Lv Weimin' 
I(National Science Library Chinese Academy of Sciences, Beijing 100190, China) 
2(University of Chinese Academy of Sciences, Beijing 100049, China) 


Abstract: [Objective] This research designs and implements the ng-info-chart, a front end visualisation component 
based on the MVC framework AngularJS. [Context] A good information analysis System requires multiple complex 
Visualzation charts to present the results. Therefore, we need to create an advanced interactive Web-based visualzation 
charts for the new Systems. [Methods] We intergrated visualzation charts with the ng-info-chart and the AngularJS 
Directive packages. The new component could call the charts Directive directly using a _ customized HTML tag. 
[Results] The ng-info-chart visualisation component has intergrated 5 third-party visualisation libraries of 11 types of 
visual charts. It Supports IE9+，Firefox and other popular Web browsers. [Conclusions] The new visualisation 
component Implements data asynchronization, automatic detection of data change, and real-time online visualzation. It 
also simpilfies the complex visualzation tasks for the information analysis system. 


Keywords: Visualization Front end MVC Direrctive 
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